<template>
    <div class="registerMain">
        <div class="registerHeader">
            <img  :src="imageUrl" @click="goHome" width="200px" height="80px">
            <div class="wecomeLogin">欢迎注册</div>
        </div>
        <div class="registerBody">
            <div class="registerArea">
                <div class="title">账户注册</div>
                <el-input v-model="email" style="margin-top: 40px;padding-left: 40px;padding-right: 10px;width: calc(100% - 80px)" placeholder="请输入邮箱"></el-input>
                <el-input v-model="username" style="margin-top: 40px;padding-left: 40px;padding-right: 10px;width: calc(100% - 80px)" placeholder="请输入用户名"></el-input>
                <el-input type="password" v-model="password" style="margin-top: 40px;padding-left: 40px;padding-right: 10px;width: calc(100% - 80px)" placeholder="请输入密码"></el-input>
                <span class="register" @click="register">立即注册</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import PortalApiActions from "@/components/api/portal-api-actions";
    import Header from '@/components/common/header.vue';
    @Component({
        components:{
            Header
        }
    })
    export default class Login extends Vue {
        public imageUrl="http://localhost/images/logo.png";
        public searchText="";
        public isShowAddDialog=false;
        public email:any="";
        public password:any="";
        public username:any="";
        async created(){

        }
        public goHome(){
            this.$router.push({
                path: '/',
            });
        }
        public async register(){
            await  PortalApiActions.register({email:this.email,password:this.password,username:this.username});
        }
    }
</script>
<style lang="less">
    .registerMain{
        width: 100%;
        height: 100%;
        .registerHeader{
            display: flex;
            height: 100px;
            width: 100%;
            background-color: #ffffff;
            justify-content: space-around;
            align-items: center;
            .wecomeLogin{
                justify-self: flex-end;
                font-family: cursive;
                font-size: 20px;
            }
        }
        .registerBody{
            height: calc(100% - 110px);
            width: 100%;
            background-color: rgba(250, 168, 172, 1);
            display: flex;
            justify-content: flex-end;
            .registerArea{
                width: 360px;
                height: auto;
                background-color: white;
                height: 400px;
                margin-top: 50px;
                margin-right: 250px;
                display: flex;
                flex-direction: column;
                .title{
                    cursor: default;
                    margin-left: 40px;
                    margin-top: 20px;
                }
                .register{
                    width: 360px;
                    height: 46px;
                    background-color: #f43499;
                    border-color: #f43499;
                    margin-left: 40px;
                    width: calc(100% - 80px);
                    cursor: pointer;
                    margin-top: 50px;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }
            }
        }
    }

</style>
